<template>
	<view class="spread flex justify-center" :class="{'box-spread': showFlag}">
		<view class="flex" style="gap: 20rpx;">
			<text style="opacity: 0">未来趋势</text>
			<view class="flex flex-col" style="gap: 20rpx;">
				<view class="flex">
					<text class="flex-1">A选项</text>
					<text class="flex-1">B选项</text>
				</view>
				<template v-if="isAch == 1">
					<view class="flex image-box-box" style="gap: 20rpx">
						<view class="image-box" v-for="i in [2, 3, 5, 6]" :key="i">
							<image :src="cardList[i].tarot.front" mode="widthFix" v-if="cardList[i].dir == 0"></image>
							<image :src="cardList[i].tarot.back" mode="widthFix" v-else></image>
						</view>
					</view>
					<view class="flex">
						<view class="flex justify-center flex-1">
							<view class="image-box">
								<image :src="cardList[1].tarot.front" mode="widthFix" v-if="cardList[1].dir == 0"></image>
								<image :src="cardList[1].tarot.back" mode="widthFix" v-else></image>
							</view>
						</view>
						<view class="flex justify-center flex-1">
							<view class="image-box">
								<image :src="cardList[4].tarot.front" mode="widthFix" v-if="cardList[4].dir == 0"></image>
								<image :src="cardList[4].tarot.back" mode="widthFix" v-else></image>
							</view>
						</view>
					</view>
					<view class="flex justify-center">
						<view class="image-box">
							<image :src="cardList[0].tarot.front" mode="widthFix" v-if="cardList[0].dir == 0"></image>
							<image :src="cardList[0].tarot.back" mode="widthFix" v-else></image>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="flex image-box-box" style="gap: 20rpx">
						<view class="image-box" v-for="i in [2, 3, 5, 6]" :key="i" :center="i">
							<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="flex">
						<view class="flex justify-center flex-1">
							<view class="image-box" center="1">
								<image src="@/static/tarot-bg.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="flex justify-center flex-1">
							<view class="image-box" center="4">
								<image src="@/static/tarot-bg.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="flex justify-center">
						<view class="image-box" center="切">
							<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
</script>

<style>
	@import "./spread.css";

	.spread {
		height: auto;
		padding: 40rpx 0;
	}

	.spread text {
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
		white-space: nowrap;
		text-align: center;
	}

	.image-box-box {
		position: relative;
	}

	.image-box-box:after {
		content: '未来趋势';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(calc(-100% - 20rpx), -50%);
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
		white-space: nowrap;
	}

	.image-box {
		position: relative;
	}

	.image-box:after {
		content: attr(center);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 24rpx;
		color: #fff;
	}

	.spread image {
		width: 80rpx;
	}
</style>